<template>
  <div class="intrduce">
    <div class="video">
      <video
        class="b-player-video"
        src="https://vdse.bdstatic.com/5f053e7c69732ea2712756925352e327.mp4?authorization=bce-auth-v1%2Ffb297a5cc0fb434c971b8fa103e8dd7b%2F2017-05-11T09%3A02%3A31Z%2F-1%2F%2F65e9ab7bd2e3973c2efcc2cac183f9643aee09005c5f3cb2d9570f98d5f4faa1"
        type="video/mp4"
        :poster="postPIc"
        preload="none"
        height="100%"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="true"
        :controls="controls"
        id="video"
      ></video>
      <div class="play-btn-box" @click="playClick" v-if="isShowPlayBtn">
        <img src="../assets/images/bofang.png" alt>
        <span>点击播放</span>
      </div>
    </div>
    <h2 class="title">36节精编【自然拼读】课程，帮助孩子快速获得见词能读，听音能写的能力。</h2>
    <div class="discounts-info">
      <div class="info-left">
        <h2>
          限时 ¥
          <span>0</span>
        </h2>
        <p>¥599</p>
      </div>
      <div class="info-right">
        <p>
          距优惠结束
          <strong>55</strong> 天
        </p>
      </div>
    </div>
    <div class="suitable">
      <ul>
        <li>
          <span></span>适合3-12岁
        </li>
        <li>
          <span></span>36节课
        </li>
        <li>
          <span></span>2-3分钟每节
        </li>
      </ul>
    </div>
    <div class="apply-info">
      <img src="../assets/images/userHead1.png" alt>
      <p>45678人已报名</p>
    </div>
    <div class="nav-tab">
      <div class="nav" :class="[isScroll?'nav-fixed':'']">
        <p :class="[num==1?'active':'']" @click="nav(1)">课程介绍</p>
        <p :class="[num==2?'active':'']" @click="nav(2)">课程目录</p>
        <p :class="[num==3?'active':'']" @click="nav(3)">购买需知</p>
        <strong class="active-border" :style="{'left':left}"></strong>
      </div>
      <div class="intrduce-con">
        <div class="intrudce-box list" ref="intrduceBox">
          <img src="../assets/images/intr1.png" alt>
        </div>
        <div class="catalogue list" ref="catalogue">
          <img src="../assets/images/intr2.png" alt>
        </div>
        <div class="buy-kneow list" ref="buyKnow">
          <img src="../assets/images/intr3.png" alt>
        </div>
      </div>
    </div>
    <div style="height:1.92rem"></div>
    <div class="footer">
      <div class="footer-left">
        <div class="now-price">
          <span>¥</span>0
        </div>
        <div class="original-price">¥599</div>
      </div>
      <div class="footer-right">立即购买</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      postPIc: require("../assets/images/pic3.png"),
      controls: false,
      isShowPlayBtn: true,
      num: 1,
      left: "13%",
      isScroll: false
    };
  },

  mounted() {
    
    window.onscroll = ()=> {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      this.handleScroll(scrollTop)
    }
  },
  methods: {
    handleScroll(scrollTop) {
      if (scrollTop > 400) {
        this.isScroll = true;
      } else {
        this.isScroll = false;
      }
      if (
        scrollTop > this.$refs.intrduceBox.offsetTop &&
        scrollTop < this.$refs.catalogue.offsetTop &&
        scrollTop < this.$refs.buyKnow.offsetTop
      ) {
        this.left = "13%";
        this.num = 1;
      }

      if (
        scrollTop > this.$refs.catalogue.offsetTop-100 &&
        scrollTop < this.$refs.buyKnow.offsetTop
      ) {
        this.left = "47%";
        this.num = 2;
      }
      if (scrollTop > this.$refs.buyKnow.offsetTop - 100) {
        this.left = "80%";
        this.num = 3;
      }
     
    },
    // destroyed: function() {
    //   window.removeEventListener("scroll", this.handleScroll);
    // },
    playClick() {
      var video = document.getElementById("video");
      if (video.paused == true) {
        video.play();
        this.nowPlayBtnStatus = this.playIng;
        this.isShowPlayBtn = false;
      } else {
        video.pause();
        this.isShowPlayBtn = true;
        this.nowPlayBtnStatus = this.playStop;
      }
      var that = this;
      console.log(video.duration);

      video.ontimeupdate = function() {
        var percent = (video.currentTime / video.duration) * 100 + "%";
        var imgpercent = (video.currentTime / video.duration) * 100 - 2 + "%";

        console.log(video.ended);
        if (video.ended) {
          that.nowPlayBtnStatus = that.playStop;
        }
        that.playTime = that.timeFormat(video.currentTime);
        that.totalPlayTime = that.timeFormat(video.duration);
      };
    },
    timeFormat(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取佘，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取佘的分，获取分钟除以60取佘的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var second = "" + parseInt(secondTime);
      var min = "0";
      var hour = "0";
      if (minuteTime > 0) {
        min = "" + parseInt(minuteTime);
      }
      if (hourTime > 0) {
        hour = "" + parseInt(hourTime);
      }

      var result =
        this.zeroTime(hour) +
        ":" +
        this.zeroTime(min) +
        ":" +
        this.zeroTime(second);
      return result;
    },
    zeroTime(n) {
      if (n < 10) {
        n = "0" + n;
      }
      return n;
    },
    drage(target) {
      var video = document.getElementById("video");
      var width = document.querySelector(".progress").offsetWidth;
      //拿到当前点击位置的x坐标
      var x = target.offsetX;

      //比如说我的视频的总时长是60分钟， 当前时间 60 * x/width
      video.currentTime = (x / width) * video.duration;
      console.log(video.currentTime);
    },
    nav(index) {
      this.num = index;
      if (index == 1) {
        this.left = "13%";
        window.scrollTo(0, this.$refs.intrduceBox.offsetTop);
      } else if (index == 2) {
        this.left = "47%";
        window.scrollTo(0, this.$refs.catalogue.offsetTop);
      } else {
        this.left = "80%";
        window.scrollTo(0, this.$refs.buyKnow.offsetTop);
      }
    }
  }
};
</script>
<style>
body {
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
}
</style>


<style lang="scss" scoped>
.video {
  position: relative;
  video {
    width: 100%;
    height: 4.19rem;
  }
}
.video-info {
  background: #fff;
  padding-top: 0.3rem;
  padding-bottom: 0.2rem;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  font-family: "微软雅黑";
  padding-left: 0.4rem;
  margin-bottom: 0.3rem;
  img {
    width: 0.68rem;
    height: 0.68rem;
    margin-right: 0.25rem;
  }
  .video-info-right {
    h2 {
      font-size: 0.32rem;
      color: #333;
      margin-bottom: 0.1rem;
    }
    p {
      font-size: 0.24rem;
      color: #999;
    }
  }
}
.play-btn-box {
  height: 0.8rem;
  width: 2.38rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4rem;
  position: absolute;
  left: 50%;
  margin-left: -1.19rem;
  top: 90%;
  margin-top: -2.1rem;
  z-index: 100;
  line-height: 0.75rem;
  img {
    width: 0.25rem;
    height: 0.29rem;
    // margin-top: .25rem;
    margin-left: 0.44rem;
  }
  span {
    color: #fff;
    font-size: 0.32rem;
    vertical-align: middle;
    position: relative;
    top: 0;
  }
}
.title {
  font-size: 0.28rem;
  color: #ff6422;
  line-height: 180%;
  padding: 0.1rem 0.3rem;
}
.discounts-info {
  background: #ff6422;
  height: 1.46rem;
  padding: 0 0.3rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-align-items: center;
  color: #fff;
  .info-left {
    h2 {
      font-size: 0.36rem;
      span {
        font-size: 0.48rem;
      }
    }
    p {
      font-size: 0.24rem;
      margin-top: 0.1rem;
      text-decoration: line-through;
    }
  }
  .info-right {
    p {
      font-size: 0.24rem;
      strong {
        font-size: 0.36rem;
      }
    }
  }
}
.suitable {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  ul {
    display: flex;
    display: -webkit-flex;
    padding: 0.32rem 0.3rem;
    li {
      margin-right: 0.3rem;
      span {
        width: 0.2rem;
        height: 0.2rem;
        background: #ff6422;
        display: inline-block;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
      color: #666666;
      font-size: 0.28rem;
    }
  }
}
.apply-info {
  background: #fff;
  padding: 0.3rem;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  img {
    width: 1.39rem;
    height: 0.6rem;
  }
  p {
    font-size: 0.28rem;
    color: #999999;
    margin-left: 0.3rem;
  }
}
.intrduce-con {
  img {
    max-width: 100%;
    text-align: center;
  }
  .list {
    border-bottom: 0.3rem solid #f1f1f1;
  }
}
.nav {
  height: 1rem;
  background: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-align-items: center;
  border-top: 0.3rem solid #f1f1f1;
  border-bottom: 0.02rem solid #f1f1f1;
  p {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    font-size: 0.32rem;
    color: #999;
    &.active {
      color: #ff6422;
    }
  }
  position: relative;

  .active-border {
    width: 0.4rem;
    position: absolute;
    top: 0.8rem;
    background: #ff6422;
    height: 0.04rem;
    transition: left linear 0.3s;
    -webkit-transition: left linear 0.3s;
  }
}
.footer {
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.3rem;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 0.2rem #ccc;
  .footer-left {
    display: flex;
    display: -webkit-flex;
    margin-left: 0.3rem;
    .now-price {
      color: #ff6422;
      font-size: 0.48rem;
      span {
        font-size: 0.32rem;
      }
    }
    .original-price {
      font-size: 0.24rem;
      color: #ccc;
      text-decoration: line-through;
      margin-left: 0.2rem;
      vertical-align: bottom;
      height: 0.3rem;
      position: relative;
      top: 0.25rem;
    }
  }
  .footer-right {
    width: 2.22rem;
    height: 0.8rem;
    background: #ff6422;
    color: #fff;
    font-size: 0.32rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.4rem;
    margin-right: 0.3rem;
    &:active {
      background: #d24a16;
    }
  }
}
.nav-fixed {
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
}
</style>

